<template>
    <div class="demo-pagination-block">
      <el-pagination
        v-model:current-page="currentPage4"
        v-model:page-size="pageSize4"
        :page-sizes="[5, 10, 20, 30, 40]"
        :size="size"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref, defineProps } from 'vue';
  import type { ComponentSize } from 'element-plus';
  
  const props = defineProps({
    total: Number, // 接收 total 作为 prop
  });
  
  const currentPage4 = ref(1);
  const pageSize4 = ref(5);
  const size = ref<ComponentSize>('default');
  const background = ref(false);
  const disabled = ref(false);
  
  const handleSizeChange = (val: number) => {
    currentPage4.value = 1; // 重置当前页码
    emit('pageChange', { currentPage: currentPage4.value, pageSize: val });
  };
  
  const handleCurrentChange = (val: number) => {
    emit('pageChange', { currentPage: val, pageSize: pageSize4.value });
  };
  
  const emit = defineEmits(['pageChange']);
  </script>